<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(bg.jpg);
            cursor: url(cursor.png), auto;
        }

        div {
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }

        td {
            height: 150px;
            width: 150px;
            background-repeat: no-repeat;
            background-position: center bottom;
            text-align: center;
            vertical-align: bottom;
            background-size: 140px 50px;
            background-image: url(hole.png)
        }

        img {
            width: 80px;
            height: 0;
            position: relative;
            bottom: 8px;
            transition: height 0.3s linear;
        }

        p {
            border: 1px solid #333;
            width: 150px;
            line-height: 50px;
            position: absolute;
            left: 0;
            top: 50px;
            background: rgba(255, 255, 255, 0.7);
            font-size: 20px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 10px;
        }

        span {
            font-size: 25px;
            color: red;

        }
    </style>
</head>

<body>
    <audio src="music.mp3" autoplay loop></audio>
    <p>打了<span>0</span>个地鼠</p>
    <div>
        <table>
            <tr>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
            </tr>
            <tr>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
            </tr>
            <tr>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
            </tr>
            <tr>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
                <td><img onclick="whack()" src="mouse.png" alt=""> </td>
            </tr>
        </table>
    </div>
</body>
<script>
    var image = document.querySelectorAll('img');

    // 随机地鼠
    function random() {
        var num = Math.floor(Math.random() * 16);// 0-15
        image[num].style.height = '80px';
        setTimeout(function () {
            image[num].style.height = '0px';
        }, 2000);

    }
    function play() {
        for (var i = 0; i < 6; i++) {
            random();
        }
    }
    setInterval(play, 2000);
    // setInterval(function(){
    //   play();
    //},2000)

    var total = 0;

    // 击打地鼠
    function whack() {
        total = total + 1;
        var span = document.querySelector("span");
        span.innerHTML = total;
    }
    
    //添加点击事件方法2（直接在标签上添加onclick = ‘whack()’）;

    // var cont = 0;
    // var i = 0;
    // for (; i < 16;) {
    //     console.log(i);
    //     image[i].onclick = function () {
    //         cont = cont + 1;
    //         alert(cont);
    //         var span = document.querySelector('span');
    //         span.innerHTML = cont;
    //     }
    //     i = i + 1;
    // }

    var body = document.body;
    body.onmousedown = function () {
        body.style.cursor = 'url(cursor-down.png),auto';
    }
    body.onmouseup = function () {
        body.style.cursor = 'url(cursor.png),auto';
    }
</script>

</html>